<template>
	<div style="margin-top: 15px">
		<div
			class="modal fade"
			id="myModalimgb"
			tabindex="-1"
			role="dialog"
			aria-labelledby="myModalimgbLabel"
			aria-hidden="true"
		>
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button
							type="button"
							class="close"
							data-dismiss="modal"
							aria-hidden="true"
						>
							&times;
						</button>
						<h4 class="modal-title" id="myModalimgbLabel">
							在图片上点击右键选择
						</h4>
					</div>
					<div class="modal-body">
						<picfilter @apply="applyCons" position="ppt"></picfilter>
						<div style="text-align: right">
							<button type="button" class="btn btn-primary" @click="sure">
								确定
							</button>
						</div>
						<div class="block">
							<!--分页-->
							<el-pagination
								@current-change="handleCurrentChange"
								:current-page.sync="currentPage"
								:page-size="20"
								layout="prev, pager, next"
								:total="total"
							>
							</el-pagination>
						</div>
						<div style="width: 100%">
							<div
								v-for="(t, i) in imgs"
								:key="i"
								class="pic-container uk-card uk-card-default"
								style="display: inline-block; height: auto; width: auto"
							>
								<el-badge :hidden="selectIndex != i" :value="1" class="item">
									<!-- <el-image
										style="max-width: 150px; height: 300px"
										:src="'/' + t.path"
										:preview-src-list="['/' + t.path]"
										@contextmenu.prevent="select"
									>
									</el-image> -->

									<el-popover placement="top" trigger="hover">
										<div style="width: 300px; margin-top: 10px">
											<el-tag v-if="t.f1 != ''" type="info">{{
												t.f1 + "|" + t.f2
											}}</el-tag>
											<el-tag v-if="t.innovation != ''" type="info">{{
												t.innovation
											}}</el-tag>
											<el-tag v-if="t.assess0 != ''" type="info">{{
												t.assess0
											}}</el-tag>
											<el-tag v-if="t.assess1 != ''" type="info">{{
												t.assess1
											}}</el-tag>
											<el-tag v-if="t.assess2 != ''" type="info">{{
												t.assess2
											}}</el-tag>
											<el-tag v-if="t.assess3 != ''" type="info">{{
												t.assess3
											}}</el-tag>
											<el-tag v-if="t.assess4 != ''" type="info">{{
												t.assess4
											}}</el-tag>
											<el-tag v-for="s in t.special" :key="s" type="info">{{
												s
											}}</el-tag>
										</div>
										<el-button @click="dropimg(t.path)" type="danger"
											>删除</el-button
										>

										<el-image
											style="max-width: 160px; height: 350px"
											:src="'/' + t.path"
											:preview-src-list="['/' + t.path]"
											slot="reference"
											@contextmenu.prevent="select"
										>
										</el-image>
									</el-popover>
								</el-badge>
							</div>
						</div>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</div>
</template>

<script>
module.exports = {
	data() {
		return {
			total: 0,
			imgs: [],
			currentPage: null,
			selectpic: null,
			cons: [],
			selectIndex: null,
		};
	},
	emits: ["choosepic"],
	components: {
		picfilter: httpVueLoader("/picfilter.vue"),
	},
	created: function () {
		/* {
			total:...,
			imgs:[     每一页显示的图片
				{
					path:...,
					bank:...,
					ver:...
				},
				{
					path:...,
					bank:...,
					ver:...
				},
				...
			]
		}
		*/
		axios.post(`/imgs?p=1`).then((res) => {
			this.total = res.data.total;
			this.imgs = res.data.imgs;
		});
	},
	methods: {
		handleCurrentChange(val) {
			axios.post(`/imgs?p=${this.currentPage}`, this.cons).then((res) => {
				this.imgs = res.data.imgs;
			});
		},
		select(event) {
			this.selectIndex = $(event.target).parents(".pic-container").index();
			this.selectpic = $(event.target).attr("src");
		},
		sure() {
			this.$emit("choosepic", this.selectpic.substring(1));
			this.selectIndex = null;
			this.selectpic = null;
		},
		applyCons(val) {
			//axios 新的条件请求图片
			this.cons = val;
			axios.post(`/imgs?p=1`, this.cons).then((res) => {
				this.imgs = res.data.imgs;
				this.total = res.data.total;
				this.currentPage = 1;
			});
		},
		dropimg(path) {
			axios.get(`/dropimg?path=${path}`).then((res) => {
				this.$message({
					type: "success",
					message: res.data,
					duration: 2000,
				});
				this.loading = true;

				axios.post(`/imgs?p=1`, this.cons).then((res) => {
					this.imgs = res.data.imgs;
					this.total = res.data.total;
					this.currentPage = 1;
					this.loading = false;
				});
			});
		},
	},
};
</script>

<style scoped>
.modal {
	height: 600px;
}

.modal-dialog {
	height: 100%;
	width: 1000px;
}

.modal-dialog {
	margin: 0;
	width: 100%;
}

.el-checkbox-group {
	height: 100px;
}

picfilter {
	width: 100%;
}

.el-pagination {
	text-align: center;
}

.uk-card {
	margin: 20px;
}
</style>
